<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: #222;
    }

    .bubbles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .bubbles span {
        position: absolute;
        bottom: -160px;
        width: 40px;
        height: 40px;
        background: rgb(255, 165, 0, .5);
        list-style: none;
        animation: square 15s infinite;
        transition-timing-function: linear;
        border-radius: 50%;
    }

    .bubbles span:nth-child(1) {
        left: 10%;
    }

    .bubbles span:nth-child(2) {
        left: 20%;
        width: 90px;
        height: 90px;
        animation-delay: 2s;
        animation-duration: 7s;
    }

    .bubbles span:nth-child(3) {
        left: 25%;
        animation-delay: 4s;
    }

    .bubbles span:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-duration: 8s;
        background-color: rgba(224, 152, 68, 0.3);
    }

    .bubbles span:nth-child(5) {
        left: 70%;
    }

    .bubbles span:nth-child(6) {
        left: 80%;
        width: 120px;
        height: 120px;
        animation-delay: 3s;
        background-color: rgba(137, 196, 235, 0.2);
    }

    .bubbles span:nth-child(7) {
        left: 32%;
        width: 160px;
        height: 160px;
        animation-delay: 2s;
    }

    .bubbles span:nth-child(8) {
        left: 55%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
        animation-duration: 15s;
    }

    .bubbles span:nth-child(9) {
        left: 25%;
        width: 10px;
        height: 10px;
        animation-delay: 2s;
        animation-duration: 12s;
        background-color: rgba(140, 224, 101, 0.3);
    }

    .bubbles span:nth-child(10) {
        left: 85%;
        width: 160px;
        height: 160px;
        animation-delay: 5s;
    }

    @keyframes square {
        0% {
            opacity: 0.5;
            transform: translateY(0px) rotate(45deg);
        }

        25% {
            opacity: 0.75;
            transform: translateY(-400px) rotate(90deg);
        }

        50% {
            opacity: 1;
            transform: translateY(-600px) rotate(135deg);
        }

        100% {
            opacity: 0;
            transform: translateY(-1000px) rotate(180deg);
        }
    }
</style>

<body>
    <div class="bubbles">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>